<template>
    <div class="component-list">
        <header>
            <h3>组件库 <a href="">返回页面</a></h3>
        </header>
        <div class="component-list__con">
            <draggable
                class="draggable"
                element="ul"
                :options="dragOptions">
                <li
                    class="dragg__list"
                    v-for="(item, index) in componentList"
                    :key="index"
                    :data-module="item.module">
                    <i class="iconfont" :class="`icon-${item.icon}`"></i>
                    <span>{{ item.title }}</span>
                </li>
            </draggable>     
        </div>
    </div>
</template>
<script>
// draggable
import Draggable from 'vuedraggable'

export default {
    name: 'goods-create',
    components: {
        Draggable
    },
    data() {
        return {
            dragOptions: {
                group: {
                    name: 'fromList',
                    pull: 'clone',
                    put: false,
                    revertClone: true
                },
                ghostClass: 'ghost',
                sort: false
            },
            componentList: [
                {
                    icon: 'blank',
                    title: '占位符',
                    module: 'blank',
                    show: true
                },
                {
                    icon: 'title',
                    title: '标题',
                    module: 'title',
                    show: true
                },
                {
                    icon: 'img-nav',
                    title: '菜单导航',
                    module: 'nav',
                    show: true
                },
                {
                    icon: 'jigsaw',
                    title: '拼图',
                    module: 'jigsaw',
                    show: true
                },
                {
                    icon: 'slide',
                    title: '轮播图',
                    module: 'slide',
                    show: true
                },
                {
                    icon: 'product-list',
                    title: '商品列表',
                    module: 'product',
                    show: true
                },
                {
                    icon: 'spike',
                    title: '秒杀',
                    module: 'count-down',
                    show: true
                },
                {
                    icon: 'store1',
                    title: '店铺街',
                    module: 'store',
                    show: true
                },
                {
                    icon: 'search',
                    title: '搜索',
                    module: 'search',
                    show: true
                },
                {
                    icon: 'information',
                    title: '资讯',
                    module: 'information',
                    show: true
                },
                {
                    icon: 'map',
                    title: '地图',
                    module: 'map',
                    show: true
                },
                {
                    icon: 'audio',
                    title: '音频',
                    module: 'audio',
                    show: true
                },
                {
                    icon: 'video',
                    title: '视频',
                    module: 'video',
                    show: true
                },
                {
                    icon: 'rick-text',
                    title: '富文本',
                    module: 'rick-text',
                    show: true
                }
            ]
        }
    },
    computed: {},
    methods: {
        /**
         * 拖拽时 clone 相关事件
         *
         * @param {Object} e - event
         */
        draggClone(e) {}
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.visual-slider {
    width: 230px;
    display: block;
    height: 100%;
    border-right: 1px solid @border-color-split;
    user-select: none;
    header {
        padding: 12px @gap;
        height: 46px;
        background: @table-thead-bg;
        display: flex;
        align-items: center;
        justify-content: space-between;
        h3 {
            font-size: 14px;
        }
        a {
            font-weight: normal;
            font-size: 12px;
            margin-left: 6px;
        }
    }
}
.component-list__con {
    padding: @gap;
    position: absolute;
    width: 100%;
    top: 46px;
    bottom: 0;
    overflow-y: auto;
    .draggable {
        width: 100%;
        text-align: center;
        margin-top: @gap;
    }
    .dragg__list {
        width: 68px;
        height: 68px;
        border-radius: 6px;
        display: inline-block;
        border: 1px solid @table-thead-bg;
        text-align: center;
        padding: 8px;
        margin: 0 10px;
        margin-bottom: 18px;
        i {
            display: block;
            font-size: 22px;
        }
    }
}
.ghost {
    opacity: 0.6;
    background: #fef6e4;
    list-style: none;
    padding: 12px;
}
</style>